<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong>{{residue}}</strong></span>
    <ul class="filters">
      <li>
        <a :class="{selected:judge==='all'}" href="javascript:;"  @click="allChange">全部</a>
      </li>
      <li>
        <a  :class="{selected:judge==='uncomplete'}" href="javascript:;"  @click="changeuncomplete">未完成</a>
      </li>
      <li>
        <a :class="{selected:judge==='complete'}" href="javascript:;"  @click="changecomplete">已完成</a>
      </li>
    </ul>
    <button class="clear-completed" @click="removeSum">清除已完成</button>
  </footer>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  computed:{
    ...mapGetters(['residue','judge'])
  },
  methods:{
    removeSum(){
      this.$store.commit('todoMain/removeAll')
    },
    allChange(){
      this.$store.commit('todoFooter/changeall')
    },
    changecomplete(){
      this.$store.commit('todoFooter/changecomplete')
      this.$store.commit('todoMain/complete')
    },
    changeuncomplete(){
      this.$store.commit('todoFooter/changeuncomplete')
       this.$store.commit('todoMain/uncomplete')
    },
  }

}
</script>
